<template>
  <view class="map-page">
    <map id="map" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
      @regionchange="regionchange"></map>
    <cover-view class="btn-box">
      <cover-view class="btn" @click="submit">确认并保存</cover-view>
    </cover-view>
  </view>
</template>
 
<script>
import deliveryman from '@/static/image/deliveryman.png'
import destination from '@/static/image/destination.png'
//地图挂载
import amapFile from '@/utils/amap-wx.130.js';

export default {
  data() {
    return {
      latitude: 34.81977,
      longitude: 113.69072,
      // 气泡提示
      covers: [
        {
          id: 1,
          latitude: 34.81977,
          longitude: 113.69072,
          width: 35,
          height: 35,
          iconPath: deliveryman,
          callout: {
            content: '',
            color: '#000',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#fff',
            padding: 8,
            display: 'ALWAYS'
          }
        },
        {
          id: 2,
          latitude: 34.81977,
          longitude: 113.70072,
          width: 10,
          height: 10,
          iconPath: destination,
        }
      ],
      //存放标记点数组
      myAmapFun: new amapFile.AMapWX({
        key: '46a14f6f07fe95c63948f5aa58f7eaea'
      })
    }
  },
  onLoad() {
    this.getLocation();
    this.setCovers(this.latitude, this.longitude)

  },
  methods: {
    //获取经纬度
    getLocation() {
      let that = this;
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          let {
            latitude,
            longitude
          } = res;
          that.latitude = latitude;
          that.longitude = longitude;
          that.setCovers(latitude, longitude)
        },

      })
    },
    //地图视野发生变化
    regionchange(e) {
      if (e.type === 'end') {
        let {
          latitude,
          longitude
        } = e.detail.centerLocation;
        this.setCovers(latitude, longitude);
      } else if (e.type == 'regionchange') {
        let self = this
        this.mapContext = uni.createMapContext("map", this);
        this.mapContext.getCenterLocation({
          type: 'gcj02',
          success: (res) => {
            let {
              latitude,
              longitude
            } = res;
            this.setCovers(latitude, longitude);
          },
          fail: (err) => {

          }
        })
      }
    },
    //设置点位
    setCovers(latitude, longitude) {
      let location = {
        id: "0",
        latitude: Number(latitude),
        longitude: Number(longitude),
        width: uni.upx2px(100),
        height: uni.upx2px(100),
        iconPath: deliveryman
      }
      this.covers[0] = location
      this.covers[1] = location

    },
    //提交
    submit() {
      let that = this
      that.myAmapFun.getRegeo({
        location: `${this.longitude},${this.latitude}`,
        success: function (res) {

        },
        fail: function (res) {
          uni.hideLoading();
          uni.$u.toast('地址解析失败');
        }
      })
    },
  }
}
</script>
 
<style lang="scss">
page {
  height: 100%;
}

.map-page {
  height: 100%;

  .map {
    width: 100%;
    height: 100%;
  }

  .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 15rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 15rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 15rpx);

    .btn {
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 10rpx;
      font-size: 32rpx;
      background-color: #ff6735;
      color: #fff;
    }
  }
}
</style>